<template>
  <!-- 首页内容展示 -->
  <!-- class="bg-gradient-to-r from-blue-400 to-pink-200 pt-5" -->
  <div class="float-gradient">
    <div class="container pt-5">
      <div
        class="row divide-x-8 divide-fuchsia-500 divide-dotted divide-opacity-25"
      >
        <!-- 左侧博客内容栏 -->
        <div class="col-9 grid justify-items-stretch">
          <div class="container mx-auto px-3 grid gap-x-8 gap-y-4">
            <!-- <div class="row gap-y"> -->
            <item-vue
              v-for="item in blogs"
              :key="item.id"
              :data="item"
            ></item-vue>
            <!-- </div> -->
          </div>
          <!--底部页码栏-->
          <div class="pt-10 justify-self-center">
            <nav aria-label="Page navigation example ">
              <ul class="pagination">
                <li class="page-item" v-for="index of all" :key="index">
                  <a class="page-link" @click="searchPage(index)">{{
                    index
                  }}</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <!-- 左侧博客内容栏结束 -->
        <!-- 右侧个人简介内容栏 -->
        <div class="col-3">
          <div class="container pt-1">
            <!-- 订阅按钮 -->
            <button
              type="button"
              class="btn btn-info rounded-full"
              data-toggle="modal"
              data-target="#exampleModal"
            >
              订阅功能上线了!
            </button>

            <!-- 弹出模态框 -->
            <div
              class="modal fade bg-blue-500 bg-opacity-25"
              id="exampleModal"
              tabindex="-1"
              role="dialog"
              aria-labelledby="exampleModalLabel"
              aria-hidden="true"
            >
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5
                      class="modal-title text-cyan-700"
                      id="exampleModalLabel"
                    >
                      <i class="fa fa-envelope"></i>
                      使用邮箱订阅
                    </h5>
                    <button
                      type="button"
                      class="close"
                      data-dismiss="modal"
                      aria-label="Close"
                    >
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form>
                      <div class="form-group">
                        <input
                          type="email"
                          class="form-control"
                          id="exampleInputEmail1"
                          aria-describedby="emailHelp"
                          placeholder="输入邮箱"
                          required=""
                        />
                      </div>
                      <div class="form-group">
                        <input
                          type="password"
                          class="form-control"
                          id="exampleInputPassword1"
                          placeholder="输入密码"
                          required=""
                        />
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button
                      type="button"
                      class="btn btn-info"
                      data-dismiss="modal"
                      @click="jump()"
                    >
                      取消
                    </button>
                    <button type="button" class="btn btn-success">订阅</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧个人简介内容栏结束 -->
        <!-- 页尾 -->
        <div class="container mt-5">
          <footer class="pb-3 text-muted small">
            <div class="row align-items-center justify-content-between">
              <div>
                <span class="navbar-brand mr-2"><strong>Mundana</strong></span>
                Copyright © . All rights reserved.
              </div>
              <div>
                Made with
                <a
                  target="_blank"
                  class="text-secondary font-weight-bold"
                  href="#"
                  >Mundana Theme</a
                >
                by WowThemes.net.
              </div>
            </div>
          </footer>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import itemVue from './item.vue'
import request from '@/utils/request.js'
defineProps({
  data: {
    type: Array,
    required: true
  }
})
//获取数据
function searchPage(index) {
  searchPages(index)
}
const searchPages = async (index) => {
  let res = await request({
    url: `/${index}/6`,
    method: 'GET'
  })
  blogs.value = res.records
}
const blogs = ref()
const getData = async () => {
  let res = await request({
    url: '/1/6',
    method: 'GET'
  })
  console.log('res:', res)
  blogs.value = res.records
  console.log('blogs', blogs)
}
const all = ref()

const getPages = async () => {
  let results = await request({
    url: '/countsOfAll',
    method: 'GET'
  })
  all.value = Math.ceil(results / 6)
}
function howManyPages() {
  getPages()
  let job = all.value
  console.log(job)
}
function jump() {
  var u = '/src/assets/Anchor-Bootstrap-UI-Kit-master/docs.html'
  location.assign(u)
}

onMounted(() => {
  howManyPages()
  getData()
})
</script>

<style scoped>
.float-gradient {
  background-color: #99ccff;
  background-image: radial-gradient(
      closest-side,
      rgb(255, 179, 204),
      rgba(235, 105, 78, 0)
    ),
    radial-gradient(closest-side, rgb(255, 192, 203), rgba(243, 11, 164, 0)),
    radial-gradient(closest-side, rgb(97, 213, 252), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, rgb(231, 72, 151), rgba(170, 142, 245, 0));
  background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;
  background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;
  background-repeat: no-repeat;
  animation: 15s moiveAnimation infinite;
}

@keyframes moiveAnimation {
  0%,
  100% {
    background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;
    background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;
  }
  25% {
    background-size: 120vw 120vh, 130vw 150vh, 130vw 120vh, 100vw 110vh;
    background-position: -30vw -30vh, 40vw -10vh, 0vw 10vh, -10vw 20vh;
  }
  50% {
    background-size: 130vw 130vh, 140vw 100vh, 100vw 150vh, 90vw 110vh;
    background-position: 10vw -60vh, 20vw 10vh, 10vw 30vh, 10vw -20vh;
  }
  75% {
    background-size: 140vw 140vh, 100vw 130vh, 100vw 150vh, 130vw 110vh;
    background-position: -70vw -70vh, 0vw -10vh, 30vw -20vh, 20vw 30vh;
  }
}
</style>
